<template>
    <nut-navbar @click-back="back" title="登录">
        <template #left>
            <RectLeft class="left" width="24px" height="24px" color="#314131" />
        </template>
        <template #right>
            <Ask class="right" width="24px" height="24px" color="#314131" />
        </template>
    </nut-navbar>
    <div class="header">
        <h3>密码登录</h3>
        <p>Hi,欢迎来到豆果美食，会做饭很酷~</p>
    </div>
    <nut-form :model-value="formData" ref="ruleForm">
        <nut-form-item prop="account"
        :rules="[{ required: true, message: '请填写账号'},
            {validator: accountValidator, message: '请填写账号'}]">
            <nut-input class="nut-input-text" v-model="formData.account" placeholder="请输入账号" type="text" />
        </nut-form-item>
        <nut-form-item prop="password" 
        :rules="[{ required: true, message: '请填写密码'},
            {validator: passwordValidator, message: ''}]">
            <nut-input class="nut-input-text" v-model="formData.password" placeholder="请输入密码" type="password" />
        </nut-form-item>
        <nut-cell>
            <nut-button type="primary" @click="submit(ruleForm)">登录</nut-button>
        </nut-cell>
        <nut-cell class="link">
            <a >忘记密码</a>
            <a @click="register">去注册</a>
        </nut-cell>
    </nut-form>
</template>

<script setup>
import { RectLeft, Ask } from '@nutui/icons-vue';
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { Toast } from 'vant';
import http from '../../tools/axios';
const router = useRouter()
const back = () => {
    router.push('/mobile/mine');
}
const register = () => {
    router.push('/register')
}
const ruleForm = ref(null);
const formData = reactive({
    account: '',
    password: '',
});
const accountValidator = (account) =>{
    var pattern = /^[a-zA-Z0-9_]{4,16}$/;
    if(pattern.test(account)){
        return Promise.resolve();
    }else{
        return Promise.reject('账号长度为4-16位')
    }
}
const passwordValidator = (password) =>{
    var pattern = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9!@#$%^&*()_+]{4,16}$/;
    if(pattern.test(password)){
        return Promise.resolve();
    }else{
        return Promise.reject('密码4-16位,至少有一个大写字母和小写字母')
    }
}
const submit = async (ruleForm) => {
    if (!ruleForm) return 
    ruleForm.validate().then(({ valid, errors }) => {
        if (valid) {
            http.post('/user/login',ruleForm.modelValue).then((res)=>{
                    console.log(res.data.data);
                    if(res.data.code === 0){
                        Toast.success('登录成功');
                        localStorage.setItem('userId', res.data.data[0].user_id);  
                        localStorage.setItem('isLogin', true);  
                        router.push({path: '/mobile/main'})
                    }
                    if(res.data.code === 2){
                        Toast.fail('密码错误');
                    }
                    if(res.data.code === 3){
                        Toast.fail('用户不存在');
                    }
                })
        } else {
            showToast.warn(errors[0].message);
            console.log('error submit!!', errors);
        }
    });
}
</script>
  
<style>
.nut-navbar {
    box-shadow: none;
    margin-top: 46px;
}
.nut-navbar .title{
    font-size: 20px !important;
}
.header{
    display: flex;
    flex-direction: column;
    margin: 30px 20px;
}
.header h3{
    font-size: 30px;
    margin: 0;
    margin-bottom: 10px;
}
.header p{
    color: #8a8a8a;
    margin: 0;
}
.nut-form{
    margin: 15px;
}
.nut-cell{
    line-height: 40px;
}
.nut-cell-group__wrap{
    box-shadow: none;
}
.nut-form-item{
    border-bottom: 1px solid #dee1e6;
}
.nut-input .input-text{
    padding: 0;
    font-size: 20px !important;
}
.nut-button{
    width: 100%;
    height: 50px !important; 
    font-size: 20px;
    margin-top: 20px;
}
.link{
    display: flex;
    justify-content: space-around;
}
</style>